import { useEffect, useState } from 'react'
import AppRouterLinkMap from '../../AppRouterLinkMap.js'

import './index.css'
import shoptypeimg from '../../assets/20230517164415.png'
import servertypeimg from '../../assets/16863946-6078152a45f9370e8cd9d9b2fe4880c4.jpg'

export default function (props) {

    // data

    const [ifactive, setifactive] = useState(false)
    const [iflinkfull, setiflinkfull] = useState(false)
    const [ifshowsubtype, setifshowsubtype] = useState(false)

    // methods

    let linkMatch = function () {
        AppRouterLinkMap.base.indexOf(props.link) != -1 ?
            (setiflinkfull(() => true)) : ''
    }

    let pathMatch = function () {
        setifactive(() => false)
        AppRouterLinkMap.base.indexOf(props.link) != -1 ?
            (props.link == props.nowpath ? setifactive(() => true) : '') :
            (props.nowpath.indexOf(props.link) != -1 ? setifactive(() => true) : '')
    }

    let showsubtype = function (type) {
        if (type && props.iffullwidth == false) return
        type ? '' : props.ifleftscroll(false)
        type ? setifshowsubtype(() => !ifshowsubtype) : setifshowsubtype(() => true)
    }

    let hidesubtype = function (type) {
        if (type && props.iffullwidth == false) return
        type ? '' : props.ifleftscroll(true)
        type ? setifshowsubtype(() => !ifshowsubtype) : setifshowsubtype(() => false)
    }

    let pagechange = function (id) {
        props.iffullwidth == false ? setifshowsubtype(() => false) : props.menuifshow()
        props.subnavpagechange(props.link, id)
    }

    // mounted / update

    useEffect(() => {
        linkMatch()
    }, [])

    useEffect(() => {
        pathMatch()
    }, [props.nowpath])

    useEffect(() => {
        props.iffullwidth == false ? setifshowsubtype(() => false) : ''
    }, [props.iffullwidth])

    return (
        <>
            <div className={'navitem' + ((ifactive || ifshowsubtype) ? (ifshowsubtype ? ' navitem-active2' : ' navitem-active') : '')} onClick={() => ((props.linkevent ? props.linkevent(props.link) : false), (props.iffullwidth ? showsubtype(1) : ''))} onMouseEnter={() => props.iffullwidth == false ? showsubtype() : ''} onMouseLeave={() => props.iffullwidth == false ? hidesubtype() : ''} style={{ borderLeft: ifshowsubtype ? (ifactive ? '3px solid #aa2d2d' : 'none') : (ifactive ? '3px solid #aa2d2d' : 'none') }}>{props.name}</div>
            {/* // */}
            {iflinkfull ? '' : <div className='subtypeitem' style={{
                position: props.iffullwidth ? 'relative' : 'fixed',
                top: props.iffullwidth ? '0' : '60px',
                left: props.iffullwidth ? '0' : '280px',
                right: props.iffullwidth ? '0' : '200px',
                bottom: props.iffullwidth ? '0' : '0px',
                overflow: props.iffullwidth ? (ifshowsubtype ? 'visible' : 'hidden') : 'hidden auto',
                transition: '300ms',
                visibility: ifshowsubtype ? 'visible' : 'hidden',
                opacity: ifshowsubtype ? 0.9 : 0,
                height: ifshowsubtype ? 'auto' : 0,
                boxShadow: props.iffullwidth ? '' : '7px 0 10px 0 #22264e'
            }} onMouseEnter={() => props.iffullwidth == false ? showsubtype() : ''} onMouseLeave={() => props.iffullwidth == false ? hidesubtype() : ''}>
                {/* // */}
                <div style={{ position: 'relative', left: props.iffullwidth ? 0 : (ifshowsubtype ? 0 : '-100%'), transition: '300ms' }}>
                    {AppRouterLinkMap.dynamicRouteData.map((item) => {
                        return (
                            <div key={item.name}>
                                {/* 版头广告栏，这个正常也是通过数组拿到属性给的图片链接的 */}
                                {('/' + item.name) == props.link ? <div className='subnavtype-topbanner' desc="架构完事后填充的内容" key={item.name}>
                                    <div className='subnavtype-topbannerin'>
                                        <img src={item.name == 'shoptype' ? shoptypeimg : servertypeimg} style={{ width: '100%', height: '100%' }} alt="" />
                                    </div>
                                </div> : ''}
                                {/* 下面判断匹配导航之后，这里正常来讲是两层遍历匹配类去渲染的，这里先直接一层遍历作为不分类渲染作为例子 */}
                                {('/' + item.name) == props.link ? (item.arr.map((itemin) => (
                                    <div onClick={() => pagechange(itemin.id)} key={itemin.id}>
                                        <div className='subtypenavitem' style={{ color: props.linkstatus == props.link && props.linkid == itemin.id ? '#f17fbd' : 'unset' }}>{itemin.name}</div>
                                    </div>
                                )
                                )) : ''}
                                <div style={{ clear: 'both' }}></div>
                            </div>
                        )
                    })}
                </div>
            </div>}
        </>
    )
}